import React from 'react';
import { changeInputAction, addItemAction } from './store/actionCreators'
import { connect } from 'react-redux'
// import store from './store'
const TodoList = (props) => {
  const { inputValue, changeInput, addItem, list } = props

  return (
    <div>
      <div>
        <input value={inputValue} onChange={changeInput} />
        <button onClick={addItem}>提交</button>
      </div>
      <ul>
        {
          list.map((item, index) => (
            <li key={item + '' + index}>{item}</li>
          ))
        }
      </ul>
    </div>);
}

const stateToProps = state => {
  return {
    inputValue: state.inputValue,
    list: state.list
  }
}

const dispathToProps = dispatch => {
  return {
    changeInput (e) {
      const action = changeInputAction(e.target.value)
      dispatch(action)
    },
    addItem () {
      const action = addItemAction()
      dispatch(action)
    }
  }
}

export default connect(stateToProps, dispathToProps)(TodoList);